<template>
  <div>
    <top></top>
    <!-- 头部 -->
    <div class="wrap-head-box">
      <div class="wrap-title-box">
        <!-- 头部标题 -->
        <div class="left-titlex-box">
          <div class="title-name">{{title.parent_title}}</div>
          <h2>{{title.issue_title}}</h2>
          <div class="title-content">
            <span class="title-pay">{{title.issue_wage}}</span>
            <span>{{title.issue_content}}</span>
          </div>
          <span class="title-move" v-for="(item,index) in title.issue_claim" :key="index">{{item}}</span>
          <div class="title-time">{{title.issue_time}}</div>
        </div>
        <!-- 头部字体图标 -->
        <div class="center-titlex-box">
          <el-tooltip class="item" effect="light" content="举报职位" placement="top-start">
            <span class="iconfont  icon-weixian"></span>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="分享到微信" placement="top-start">
            <span class="iconfont icon-xiaochengxu"></span>

          </el-tooltip>
          <el-tooltip class="item" effect="light" content="微信扫一扫,分享到小程序" placement="top-start">
            <span class="iconfont  icon-weixin"></span>

          </el-tooltip>
        </div>
        <!-- 头部简历，收藏 -->
        <div class="right-titlex-box">
          <router-link :to="{}">
            <div class="collect">
              <span class="iconfont icon--star-o  wu"></span>收藏
            </div>
          </router-link>
          <router-link :to="{}">
            <div class="resume">
              投个简历
            </div>
          </router-link>
          <div class="resume-title">
            <router-link :to="{}">
              <span class="iconfont  icon-ziliao">完善在线简历</span>
            </router-link>
            <router-link :to="{}">
              <span class="iconfont  icon-shangchuan">上传附件简历</span>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间部分 -->
    <div class="wrap-center-box">
      <!-- 左侧职位要求 -->
      <div class="left-center-box">
        <div class="job-title-box">
          <p class="job-title"> 职位诱惑:</p>
          <p class="job">{{title.parent_intro}}</p>
        </div>
        <div class="job-details">
          <div class="job-title-box">
            <p class="job-title"> 职位描述:</p>
            <div class="describe-box">
              <div class="describe">
                工作职责:<br> 1、依据产品需求完成高质量的跨终端Web的前端开发和维护; <br> 2、对具体的产品进行性能优化，实现**的页面加载、执行和渲染时间;
                <br> 3、在理解前端开发流程的基础上,结合前端实际建立或优化提升工作效率的工具; 任职资格:<br> 任职资格:
                <br> 1、统招本科学历，计算机相关专业,精通各种前端技术，包括HTML/CSS/JavaScript等等;
                <br> 2、备跨终端的前端开发能力，能解决各种兼容问题; <br>3、少熟悉一门非前端的语言(Node/Java/PHP/C/C+ +/Python/Ruby)。
              </div>
            </div>
          </div>

          <p class="job-title ap"> 工作地址:</p>
          <p class="job">{{title.issue_site}}</p>
          <!-- 职位发布者 -->
          <div class="job-title-box">
            <p class="job-title ap"> 职位发布者:</p>
            <div class="wrap-issue-box">
              <div class="wrap-img"><img :src="message.img"></div>
              <div class="wrap-name">
                <span class="name-title"> {{message.name}}</span>
                <span class="iconfont icon-45-weixin-xiaoxi  inf"></span>
                <p>{{message.firm}}</p>
              </div>
            </div>
          </div>
          <!-- 面试评价 -->
          <div class="appraise-bpx">
            <el-divider content-position="left">
              <span class="job-title">面试评价</span>
            </el-divider>
            <el-rate v-model="value" show-text>
            </el-rate>
          </div>
        </div>
      </div>
      <!-- 右侧公司简介 -->
      <div class="right-center-box">
        <div class="firm-title-box">
          <div class="firm-img-box"><img :src="title. parent_img"></div>
          <p class="firm-name">{{title. parent_title}}
            <span class="iconfont icon-anquan as"></span>
          </p>
        </div>

        <ul class="firm-lits">
          <li v-for="(itme2,index2) in title. parent_content" :key="index2">
            <i :class="itme2.icon" class="icon"></i>
            <span class="icon-coneten"> {{itme2.name}}</span>
          </li>
        </ul>
        <!-- 相似职位 -->
        <el-divider content-position="left">
          <span class="job-title">相似职位</span>
        </el-divider>

        <div class="similarity-box" v-for="(item3,index3) in data" :key="index3">
          <div class="similarity-img">
            <img :src="item3.img">
          </div>
          <div class="similarity-text">
            <p class="title-c">{{item3.name}}</p>
            <span class="pay-c">{{item3.pay}}</span>
            <p class="firm2-c">{{item3.firm2}}</p>
          </div>
        </div>

        <router-link :to="{}">
          <div class="check-box">查看更多职位</div>
        </router-link>
      </div>

    </div>
    <bottom></bottom>
  </div>
</template>
<script>
import bottom from "./bottom";
import top from "./top";

export default {
  components: { bottom, top },
  data() {
    return {
      value: null,
      title: {
        id: 1,
        parent_title: "快手",
        parent_content: [
          { icon: "iconfont icon-lingyu", name: "医疗|健康" },
          { icon: "iconfont icon-fazhanjieduan", name: "D轮及以上" },
          { icon: "iconfont icon-renshu", name: "500-2000人" },
          { icon: "iconfont icon-jia", name: " http://www.haodf.com" }
        ],
        parent_img: "../static/img/banner1.jpg",
        parent_intro: "空间大,大牛多,待遇好,氛围浓",
        issue_title: "高端前端开发工程师[北京中间-中关村]",
        issue_wage: "20K-36K",
        issue_content: "经验不限/本科",
        issue_time: "一天前,发布于拉勾网",
        issue_site:
          "北京-朝阳区-常营-地铁八通线双桥站A口Dream2049产业园东i ]B05栋",
        issue_claim: ["移动端", "前端开发", "web前端"]
      },
      message: {
        name: "宋双兵",
        img: "../static/img/banner1.jpg",
        weixin: "../static/img/banner1.jpg",
        firm: "好大夫在线"
      },
      data: [
        {
          name: "前端开发工程师-企业大学",
          pay: "20k-40k",
          firm2: "字节跳动",
          img: "../static/img/banner1.jpg"
        },
        {
          name: "前端开发工程师-企业大学",
          pay: "20k-40k",
          firm2: "字节跳动",
          img: "../static/img/banner1.jpg"
        },
        {
          name: "前端开发工程师-企业大学",
          pay: "20k-40k",
          firm2: "字节跳动",
          img: "../static/img/banner1.jpg"
        },
        {
          name: "前端开发工程师-企业大学",
          pay: "20k-40k",
          firm2: "字节跳动",
          img: "../static/img/banner1.jpg"
        }
      ]
    };
  },
  mounted() {}
};
</script>
<style scoped>
ul,
li {
  list-style: none;
}
p {
  margin: 0px;
  padding: 0px;
}
/* 相似职位 */
.similarity-img {
  width: 90px;
  height: 60px;
  float: left;
}
.similarity-img img {
  width: 100%;
  height: 100%;
}
.similarity-box {
  border-bottom: 1px solid #ccc;
  width: 100%;
  overflow: hidden;
  padding: 15px 0px;
  padding-left: 10px;
  box-sizing: border-box;
}
.similarity-text {
  margin-left: 20px;
  float: left;
}
.title-c {
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.pay-c {
  font-size: 15px;
  color: red;
}
.firm2-c {
  font-size: 13px;
  color: rgb(155, 141, 141);
}
.check-box {
  margin-top: 20px;
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  background: #8b8989;
  color: #fff;
}
/* 头部 */
.wrap-head-box {
  width: 100%;
  min-height: 60px;
  background-color: #f2f5f4;
  overflow: hidden;
}
.wrap-title-box {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 60px;
  /* border: 1px solid red; */
  overflow: hidden;
}
/* 头部标题 */
.left-titlex-box {
  width: 50%;
  /* border: 1px solid red; */
  float: left;
}
.title-name {
  margin-bottom: 10px;
}
h2 {
  margin: 0px;
  padding: 0px;
}
.title-pay {
  color: red;
}
.title-content {
  margin: 10px 0px;
}
.title-move {
  display: inline-block;
  padding: 4px 8px;
  background: #fff;
  margin: 0px 2px;
  font-size: 13px;
  border-radius: 8px;
}
.title-time {
  font-size: 12px;
  color: rgba(170, 201, 169, 0.692);
  margin: 10px 0px;
}
/* 头部小程序 */
.center-titlex-box {
  margin-top: 30px;
  text-align: center;
  width: 15%;
  float: left;
}
.center-titlex-box span {
  /* margin: 0px 10px; */
  display: inline-block;
  padding: 0px 10px;
  font-size: 22px;
  cursor: pointer;
  color: #ccc;
}
/* 头部简历,收藏 */
.right-titlex-box {
  width: 34.5%;
  /* border: 1px solid red; */
  float: left;
}
.wu {
  margin-right: 5px;
}
.collect,
.resume {
  float: left;
  width: 130px;
  height: 44px;
  border: 1px solid #00bfff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;

  justify-content: center;
}
.collect {
  color: #00bfff;
  margin-left: 30px;
}
.resume {
  margin-left: 20px;
  font-size: 20px;
  color: #fff;
  background: #00bfff;
}
.resume-title {
  text-align: center;
  clear: both;
  display: flex;
  justify-content: space-around;
}
.resume-title span {
  color: #000;
}
/* 中间部分 */
.wrap-center-box {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 30px;
  overflow: hidden;
}
.left-center-box {
  float: left;
  width: 69%;
}
.right-center-box {
  float: right;
  width: 29.5%;
  box-shadow: 5px 1px 5px #ccc;
  /* border: 1px solid blue; */
}
/* 左侧 */
.job-title {
  font-size: 16px;
  color: #333;
  font-weight: 700;
}
.describe {
  margin-top: 20px;
  line-height: 30px;
}
.job {
  margin-top: 13px;
  color: #333;
}
.job-details {
  width: 100%;
  margin-top: 26px;
  min-height: 200px;
}
.ap {
  margin-top: 26px;
}
.wrap-issue-box {
  max-width: 200px;
  height: 65px;
  /* border: 1px solid red; */
  margin-top: 20px;
  justify-content: space-between;
  display: flex;
}
.wrap-img {
  height: 100%;
  width: 110px;
}
.wrap-img img {
  width: 100%;
  height: 100%;
}
.name-title {
  font-weight: 700;
}
.wrap-name p {
  margin-top: 5px;
  color: #ccc;
}
.inf {
  color: turquoise;
  font-size: 18px;
}
/* 面试评价 */
.appraise-bpx {
  margin-top: 50px;
}
.firm-img-box {
  width: 150px;
  height: 100%;
}
.firm-img-box img {
  width: 100%;
}
.firm-name {
  font-size: 19px;
  font-weight: 500;
  position: absolute;
  bottom: 25px;
  right: 20px;
  /* top: 0px; */
}
.firm-title-box {
  position: relative;
  padding-bottom: 20px;
  box-sizing: border-box;
  width: 245px;
  height: 125px;
  padding-left: 10px;
  /* border: 1px solid red; */
}
.as {
  margin-left: 2px;
  color: turquoise;
}
.icon {
  font-size: 19px;
  color: #8b8989;
  padding-left: 10px;
}
.icon-coneten {
  color: #8b8989;
  margin-left: 10px;
  margin-top: 10px;
  display: inline-block;
}
</style>
